const path = require('path')
// 环境变量
const isProduction = process.env.NODE_ENV === 'production'
// const isTest = process.env.NODE_ENV === 'test'
module.exports = {
  // 基本路径
//   publicPath: process.env.NODE_ENV === 'production' ? '/production-sub-path/' : '/',
  publicPath:"./",//打包后资源（y也就是static）目录的路径，默认是绝对路径，直接是e:static/js
  //如果写了/xxx/,那就是
  // 因为设置了publicPath: './' 在index.html中引入的js文件路径会变成<script src="./static1/js/chunk-elementUI.js"></script>
  // 输出文件目录
  outputDir: `${process.env.NODE_ENV}`, // 打包输出目录名字：dist/
  assetsDir: 'static1',         // 静态资源目录：dist/static/
  // 打包后文件结构：
  // dist/
  // ├── static/
  // │   ├── js/
  // │   ├── css/
  // │   └── img/
  // ├── index.html
  // └── favicon.ico
// 打包输出配置
  configureWebpack:{
    // 静态资源目录
    //   assetsDir: 'static',
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'src/'),
        views: path.resolve(__dirname, 'src/views/'),
      },
    },
    //和resolve同级，也就是相当于optimization：{}
    // 生产环境配置：
    // 分割打包（optimization）的作用：优化加载性能，避免单个文件过大
    // 浏览器可以并行加载多个文件，但加载顺序不确定，所以需要分割打包，现代浏览器支持6-8个并行连接
    // 好处
    //缓存优化：第三方库变更少，可长期缓存（只修改业务代码，只需要重新下载app.js,element等js从缓存中读取）
    // 路由懒加载的好处：用户访问/user时才会下载对应的JS文件，也就是单独打包
    // 并行加载：多个文件可同时下载
    // 按需加载：只加载需要的代码
    ...(isProduction ? {
      optimization: {
        splitChunks: {
          chunks: 'all',
          cacheGroups: {
            libs: {
              name: 'chunk-libs',
              test: /[\\/]node_modules[\\/]/,
              priority: 10,
              chunks: 'initial'
            },
            elementUI: {
              name: 'chunk-elementUI',//输出的文件名
              priority: 20, // 优先级为20（数字越大优先级越高)当同一个文件匹配多个规则时，使用优先级高的规则
              test: /[\\/]node_modules[\\/]_?element-ui(.*)/,//匹配node_modules中element-ui相关的文件
              //  chunks: 'all'                      // 同步异步都分割
            },
            commons: {
              name: 'chunk-commons',
              minChunks: 2,
              priority: 5,
              reuseExistingChunk: true
            }
          }
        }
      }
    } : {}),
    // cache: {
    //   type: 'filesystem',  // 使用磁盘缓存
    //    buildDependencies: {
    //     config: [__filename] // 配置文件变化时失效缓存
    //   }
    //   // 第一次打包：完整编译
    //   // 第二次打包：只编译变化的部分，其他从缓存读取
    // }
  },
  // 开发服务器配置
  devServer: {
    port: 8080,
    open: true,
    //代理
    // proxy: {
    //   '/api': {
    //     target: 'http://localhost:3000',
    //     changeOrigin: true,
    //     pathRewrite: {
    //       '^/api': ''
    //     }
    //   }
    // }
    // headers: {
    //   'Cache-Control': 'no-cache'  // 开发环境禁用缓存，默认也是禁用缓存的，不用设置！只是有了更明确而已
    // 为什么开发环境要禁用缓存？实时预览、调试方便,热更新(避免缓存导致修改不生效),默认就是文件变化就触发浏览器刷新
    // }
  },
  //sourceMap
  // 开发环境开启：便于调试，能定位到原始代码
  // 生产环境关闭：文件更小，加载更快，若出问题了在开发环境复现|关键操作添加详细日志
  productionSourceMap: process.env.NODE_ENV === 'production' ? false : true,//生产环境sourceMap要关闭，
  // CSS配置
  css: {
    extract: process.env.NODE_ENV === 'production',//// 生产环境提取CSS到单独文件
    sourceMap: process.env.NODE_ENV !== 'production'// 开发环境开启sourceMap
    // extract的作用：
    // 开发环境：CSS嵌入JS中，热更新快
    // 生产环境：CSS单独文件，可缓存、并行加载
  },
  // 链式配置优化打包速度
  chainWebpack: config => {
    // 1. 修改HTML标题
    config.plugin('html').tap(args => {
      args[0].title = '我的Vue项目'
      return args
    })
    
    // 2. 生产环境配置
    if (process.env.NODE_ENV === 'production') {
      // 压缩代码
      config.optimization.minimize(true)
      
      // 添加打包分析插件
      // if (process.env.npm_config_report) {
      //   config.plugin('webpack-bundle-analyzer')
      //     .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
      // }
    }
          // babel缓存
      // config.module
      //   .rule('js')
      //   .use('babel-loader')
      //   .tap(options => ({
      //     ...options,
      //     cacheDirectory: true,
      //     cacheCompression: false  // 禁用缓存压缩，提升速度
      //   }))
      
      // // 图片压缩缓存
      // config.module
      //   .rule('images')
      //   .use('image-webpack-loader')
      //   .loader('image-webpack-loader')
      //   .options({
      //     bypassOnDebug: true,
      //     limit: 8192,  // 小于8KB的图片转为base64
      //     esModule: false
      //   })
    // 3. 测试环境配置
    // if (process.env.NODE_ENV === 'test') {
    //   config.plugin('define').tap(definitions => {
    //     definitions[0]['process.env'].NODE_ENV = '"test"'
    //     return definitions
    //   })
    // }
  }
//   生产环境代码压缩
// 目的：减小文件体积，提高加载速度
// 好处
// 加载更快：文件体积减少60-80%
// 节省带宽：减少用户流量消耗
// 提升体验：页面打开速度更快
// // 压缩前
// function calculateTotalPrice(items) {
//   let total = 0;
//   for (let i = 0; i < items.length; i++) {
//     total += items[i].price;
//   }
//   return total;
// }

// // 压缩后（不可读，但体积小）
// function n(t){let e=0;for(let n=0;n<t.length;n++)e+=t[n].price;return e}
// 打包的本质目的：
// 减少HTTP请求数（将多个文件合并）---指的是浏览器加载页面时需要向服务器发起的请求数量，早期优化是将多个文件合并，现在是业务和第三方库单独打包，第三方库长期缓存
// 利用浏览器缓存（第三方库单独打包）
// 并行加载优化（多个小文件并行下载）
// 代码压缩（减小文件体积）
// 合理分割+并行加载+缓存优化 = 最佳性能

// 浏览器缓存（缓存的关键：文件名哈希---webppack默认：文件被修改，打包名就随机变化，第三方库未变化不会重新打包，使用缓存）
// 用户首次访问->下载所有文件->浏览器缓存
// 用户第二次访问（业务代码未变）->服务器返回304 Not Modified → 从缓存读取所有文件
// 用户第三次访问（只有业务代码变了，修改前：app.abc123.js，修改后：app.xyz789.js）->app.js重新下载，其他的从缓存读取所有文件
// 状态码：200：重新下载（状态码200 (from disk cache)：从磁盘缓存读取）
// 总结：浏览器发起请求get->检查缓存（有则发起请求，200，没有则直接下载）->服务器响应（文件未变，304 Not Modified（使用缓存），变了则200重新下载）

// 状态码：304：从缓存读取
// 浏览器刷新行为：

// 普通刷新（F5）：可能重新验证缓存
// 强制刷新（Ctrl+F5）：忽略缓存，重新下载所有文件
// 正常访问（直接输入URL）：使用缓存
// 打包速度优化？

//断点续传
//图片展示
// promise除了用来请求还能用来干啥
}